<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的基础用法</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            /* position: absolute; */
            width: 350px;
            height: 350px;
            border: 2px solid aqua;
            margin: 50px;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .box .item1{
            /* 绝对定位会提升元素层级，元素层级高于浮动元素
                1.绝对定位元素开启以后元素会原地漂浮起来，飘到文档流的最顶层
                2.两个元素都开启绝对定位，后方结构元素层级高于前方元素的结构层级
                3.定位元素也会进行强制类型转换，转换成一个特殊的块元素

                开启定位的元素会有一套全新的布局方式叫： 坐标系布局
                通过left right top bottom来进行调整
                绝对定位是根据参照物来移动位置
                left 表示离参照物最左边的距离
                right 表示离参照物最右边的距离

                参照物的概念：
                绝对定位的参照物也叫做包含块，它的作用就是位绝对定位元素提供坐标，
                偏移和显示范围的一个参照物，也就是确定绝对定位偏移起点和位置的参考

                在默认情况下，body就是一个最大的包含块，所有的定位元素都是根据窗口位置进行调整

                总结：绝对定位需要参照物，参照物就是距离它最近的一个包含块祖先元素，如果没有，那么就参照body
            */
            position: absolute;
            left:0px;
            top:0px;
            background-color: skyblue;
        }
        .box .item2{
            position: absolute;
            background-color: rgba(135, 167, 235, 0.584);
        }
        .box .item3{
            position: absolute;
            background-color: rgba(143, 135, 235, 0.637);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">one</div>
        <div class="item2">two</div>
        <div class="item3">three</div>
    </div>
    <!-- 定位是用来实现页面的交叉布局，层叠布局，以及让元素相对于窗口进行固定的一种方式
    
        定位方式一共有4种
        1.相对定位 relative
        2.绝对定位 absolute
        3.固定定位 fixed
        4.粘滞定位 sticky
    -->
</body>
</html>